@extends('layouts.base')
@section('title', '云商品图库列表管理')
@section('admin-style')
    <link rel="stylesheet" href="{{ asset('/assets/plugins/dropify/dist/css/dropify.min.css') }}">
@stop
@section('content')
    <div class="container-fluid">
        <!-- ============================================================== -->
        <!-- Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <div class="row page-titles">
            <div class="col-md-5 align-self-center">
                <h3 class="text-themecolor">云商品图库</h3>
            </div>
            <div class="col-md-7 align-self-center">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">首页</a></li>
                    <li class="breadcrumb-item">云商品图库管理</li>
                    <li class="breadcrumb-item active">商品添加云商品图库</li>
                </ol>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header bg-success">
                        <h4 class="m-b-0 text-white">添加云商品图库</h4>
                    </div>
                    <div class="card-body"></div>
                    <div class="card-body">
                        <form role="form">
                            @csrf
                            <div class="form-body">
                                <div class="form-group row">
                                    <label class="control-label text-right col-md-2" for="">商品名称：</label>
                                    <div class="col-md-7">
                                        <input class="form-control form-white goodsName" autocomplete="off" value="@if(!empty($cloudimg)){{$cloudimg->images_name}}@endif" required placeholder="输入商品名称" type="text" name="category-name">
                                        <span class="goodsName_title" style="color:red;display:none;">请输入商品名称</span>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="control-label text-right col-md-2" for="">商品图片：</label>
                                    <div class="col-md-3">
                                        <input class="form-control form-white goodsImage" style="display: none;" type="file" onchange="upload()"  id="photoFile" name="category-name">
                                        <img id="preview_photo" src="@if(!empty($cloudimg))@if($cloudimg->base64_image){{$cloudimg->base64_image}}@endif @endif" width="150px" @if(!empty($cloudimg))@if(!$cloudimg->base64_image)style="display: none;"@endif @endif >
                                        <img id="preview_photo" src="" width="150px" style="display: none;width:60%; height:auto;">
                                        <input type="hidden" required  value="{{$cloudimg->base64_image}}" name="goodsImages" id="goodsImages">
                                        <span class="goodsImage_title" style="color:red;display:none;">请上传商品图片</span>
                                    </div> 
                                </div>
                                <div class="form-group row">
                                    <label class="control-label text-right col-md-2" for="pid">商品分类：</label>
                                    <select class="form-control custom-select categoryId" style="width:635px;margin-left:15px;"  required name="categoryId" id="pid">
                                        <option value="0">请选择商品类别</option>
                                        @foreach($categs as $k => $v)
                                            <option value="{{$v->id}}">{{$v->goods_name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group row">
                                    <label class="control-label text-right col-md-2" for="">商品单价：</label>
                                    <div class="col-md-7">
                                        <input class="form-control form-white shopPrice" placeholder="请输入价格（单位：元）" type="text" name="category-name">
                                        <span class="shopPrice_title"></span>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="example-month-input" class="control-label text-right col-md-2">商品单位：</label>
                                    <div class="col-md-7">
                                        <select name="goods_unit" class="custom-select goodsUnit">
                                            <option value="0">个</option>
                                            <option value="1">瓶</option>
                                            <option value="2">袋</option>
                                            <option value="3">包</option>
                                            <option value="4">罐</option>
                                            <option value="5">块</option>
                                            <option value="6">盒</option>
                                            <option value="7">提</option>
                                            <option value="8">打</option>
                                            <option value="9">条</option>
                                            <option value="10">箱</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="control-label text-right col-md-2" for="">商品介绍：</label>
                                    <div class="col-md-7">
                                        <textarea name="textarea" id="goodsContent" required class="form-control" required="" autocomplete="off" placeholder="商品介绍..." aria-invalid="false"></textarea>
                                        <span class="goodsContent_title"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-actions">
                                <div class="row">
                                    <div class="col-md-8">
                                        <div class="row">
                                            <div class="offset-sm-3 col-md-9">
                                                <button type="button" class="btn btn-success waves-effect waves-light save-category" data-dismiss="modal">保存</button>
                                                <a href="{{ route('admin.goods.index') }}"><button type="button" class="btn btn-danger"><i class=" fas fa-times"></i> 取消</button></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="{{asset('assets/js/jquery.min.js')}}"></script>
    <script>
       $(".choice-image").click(function(){
            var baseurl = $(this).attr('baseurl')
            $("#preview_photo").attr('src',baseurl);
            $("#preview_photo").css('display','block');
            $("#goodsImages").val(baseurl)

        });
    </script>
    <script>
        function uploadPhoto() {
            $(".goodsImage").click();
            $(this).css('border-color','#ced4da');
            $(".goodsImage_title").html('');
        }
        function upload() {
            if ($("#photoFile").val() == '') {
                return;
            }
            var formData = new FormData();
            formData.append('goodsImage', document.getElementById('photoFile').files[0]);
            $.ajax({
                url:"/admin/goods/upload",
                type:"post",
                data: formData,
                contentType: false,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(data) {
                    if (data.images) {

                        $("#preview_photo").attr("src",data.images);
                        $("#preview_photo").css('display','block')
                        $("#goodsImages").val(data.images);
                    }
                },

            });
        }
        $(".goodsName").focus(function(){
            $(this).css('border-color','#ced4da');
            $(".goodsName_title").css('display','none');
        });
        $(".save-category").click(function () {
            var goodsName = $(".goodsName").val();
            var goodsImages = $("#goodsImages").val();
            var categoryId = $("select[name='categoryId'] option:selected").val();
            var shopPrice = $(".shopPrice").val();
            var goodsUnit = $(".goodsUnit").val();
            var goodsContent = $("#goodsContent").val();
            if(!goodsName){
                $('.goodsName').css('border-color','red')
                $('.goodsName_title').css('display','block');
                return;
            }
            if(!goodsImages){
                $('.goodsImage_title').css('color','red')
                $('.goodsImage_title').css('display','block');
                return;
            }
            var formData = new FormData();
            formData.append('goodsName', goodsName)
            formData.append('categoryId', categoryId)
            formData.append('shopPrice', shopPrice)
            formData.append('goodsUnit', goodsUnit)
            formData.append('goodsImage', goodsImages)
            formData.append('goodsContent', goodsContent)
            $.ajax({
                type: 'post',
                url: '/admin/goods/store',
                data: formData,
                dataType: 'json',
                cache: false,
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(data) {
                    if (!data.flag) {
                        window.close(data.msg);
                        return;
                    }
                    window.close(data.msg);
                    window.location.href='/admin/goods';
                },
            })

        })
    </script>
@stop
